<template>
  <div class="freight">
    <el-form ref="form" :model="form" class="form" status-icon label-width="130px">
      <el-form-item
        :rules="[{ required: true, message: '请输入模板名称', trigger: 'blur' }]"
        label="模板名称："
        prop="name"
      >
        <el-input
          v-model="form.name"
          type="text"
          placeholder="请输入模板名称（最多18字）"
          maxlength="18"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        :rules="[{ required: true, message: '请选择运费方式', trigger: 'blur' }]"
        label="运费方式："
        prop="freightType"
      >
        <el-radio-group v-model="form.freightType">
          <el-radio :label="1">平台包邮</el-radio>
          <el-radio :label="2">自定义运费</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        :rules="[{ required: true, message: '请选择快递公司', trigger: 'blur' }]"
        label="默认快递公司："
        prop="expressCompany"
      >
        <el-select v-model="form.expressCompany" placeholder="请选择默认快递公司">
          <el-option
            v-for="(item, index) in expressCompanies"
            :key="index"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="form.freightType==2"
        :rules="[{ required: form.freightType==2?true:false, message: '请选择目的地', trigger: 'blur' }]"
        label="目的地："
        prop="dest"
      >
        <el-select v-model="form.dest" multiple placeholder="请选择目的地">
          <el-option
            v-for="item in provinces"
            :key="item.label"
            :label="item.label"
            :value="item.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="form.freightType==2"
        :rules="[{ required: form.freightType==2?true:false, message: '请选择计费类型', trigger: 'blur' }]"
        label="计费类型："
        prop="chargeType"
      >
        <el-radio-group v-model="form.chargeType">
          <el-radio :label="0">按重量</el-radio>
          <el-radio :label="1">按件数</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        v-if="form.freightType==2"
        :rules="[{ required: form.freightType==2?true:false, message: '请输入首重', trigger: 'blur' }]"
        label="首重（千克）："
        prop="firstWeight"
      >
        <el-input
          v-model="form.firstWeight"
          type="text"
          placeholder="请输入首重"
          maxlength="18"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        v-if="form.freightType==2"
        :rules="[{ required: form.freightType==2?true:false, message: '请输入首费', trigger: 'blur' }]"
        label="首费（元）："
        prop="firstFee"
      >
        <el-input
          v-model="form.firstFee"
          type="text"
          placeholder="请输入首费"
          maxlength="18"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        v-if="form.freightType==2"
        :rules="[{ required: form.freightType==2?true:false, message: '请输入续重', trigger: 'blur' }]"
        label="续重（千克）："
        prop="continueWeight"
      >
        <el-input
          v-model="form.continueWeight"
          type="text"
          placeholder="请输入续重"
          maxlength="18"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        v-if="form.freightType==2"
        :rules="[{ required: form.freightType==2?true:false, message: '请输入续费', trigger: 'blur' }]"
        label="续费（元）："
        prop="continueFee"
      >
        <el-input
          v-model="form.continueFee"
          type="text"
          placeholder="请输入续费"
          maxlength="18"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        v-if="form.freightType==2"
        :rules="[{ required: form.freightType==2?true:false, message: '请选择是否包邮：', trigger: 'blur' }]"
        label="是否包邮："
        prop="zeroFeeFlag"
      >
        <el-radio-group v-model="form.zeroFeeFlag">
          <el-radio :label="0">不包邮</el-radio>
          <el-radio :label="1">包邮</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item class="action-btns">
        <el-button :loading="loading" type="primary" @click="submitForm('form')">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import provinces from './components/provinces-code.json'
import { freightSave } from '../../api/config'

export default {
  data() {
    return {
      provinces,
      loading: false,
      form: {
        name: '',
        freightType: 1,
        expressCompany: '',
        dest: [],
        chargeType: 0,
        firstWeight: '',
        firstFee: '',
        continueWeight: '',
        continueFee: '',
        zeroFeeFlag: 1
      },
      expressCompanies: ['顺丰快递', '中通快递', '韵达快递']
    }
  },
  created() {
    if (this.$route.query.data) {
      const form = JSON.parse(this.$route.query.data)
      form.dest = form.dest.split(',')
      this.form = Object.assign(this.form, form)
    }
  },
  methods: {
    freightSave() {
      this.loading = true
      const { dest } = this.form

      freightSave({
        ...this.form,
        dest: dest.join(',')
      })
        .then(res => {
          this.$router.push({ path: '/config/area' })
        })
        .finally(() => {
          this.loading = false
        })
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.freightSave()
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.freight {
  padding: 40px 20px;
  .form {
    width: 480px;
  }
}
</style>
